<template>

  <el-button type="primary" @click="add()">添加用户</el-button>
  <el-button type="primary" @click="goBack()" plain>返回</el-button>

  <!-- 用户列表 -->
  <!--
    :data  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="userList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="100px" />
    <el-table-column property="id" label="用户ID" />
    <el-table-column property="name" label="用户名" />
    <el-table-column label="操作" >
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row  获取当前行的数据对象 -->
        <el-button type="danger" @click="remove(scope.row.id)">移出</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--
    分页功能
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）

      :hide-on-single-page  只有一页时是否隐藏
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      :hide-on-single-page="true"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 添加角色用户弹窗 -->
  <el-dialog
      v-model="roleUserDialogVisible"
      title="添加角色用户"
      width="40%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true">

    <!-- :model       表单绑定的数据 -->
    <!-- label-width  表单整体距离左侧的宽度 -->
    <!-- :rules       绑定验证规则 -->
    <!-- ref          表单提交之前验证表单的验证规则 -->
    <el-form :model="this.roleUserQuery" label-width="100px" :rules="roleUserRules" ref="roleUserRefForm">

      <!-- 用户 -->
      <el-form-item label="用户" prop="userId">
        <el-select v-model="this.roleUserQuery.userId" placeholder="请选择用户">
          <el-option v-for="notOwnedRoleUser in this.notOwnedRoleUserOptions"
                     :key="notOwnedRoleUser.id"
                     :label="notOwnedRoleUser.name"
                     :value="notOwnedRoleUser.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addRoleUser()">提交</el-button>
        <el-button @click="this.roleUserDialogVisible = false">关闭</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>

</template>

<script>
  import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
  import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "RoleUserView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 加载当前角色的用户列表
        userList: [ ],

        // 分页参数
        pageSize: 0,
        total: 0,

        // 角色用户对话框是否可见
        roleUserDialogVisible: false,

        // 没有角色的用户下拉选项（拥有角色的用户不可再添加，每个用户只能拥有一个角色）
        notOwnedRoleUserOptions: [],

        // 角色用户对象
        roleUserQuery: { },

        // 角色用户表单的验证规则
        roleUserRules: {
          userId: [
            { required: true, message: '请选择用户', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 加载当前角色的用户列表（第一页）
      this.loadUserList(1);

      // 加载没有角色的用户下拉选项
      this.loadNotOwnedUserOptions();
    },

    methods: {
      // 加载当前角色的用户列表
      loadUserList(current) {
        // 获取角色的id
        let roleId = this.$route.params.id;

        // 向后端发送请求
        doGet("/api/user/list/" + roleId, {
          // 要查询第几页数据
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 角色列表
            this.userList = resp.data.data.list;
            // 分页参数
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("角色列表加载失败", "error");
          }
        })
      },

      // 加载没有角色的用户下拉选项
      loadNotOwnedUserOptions() {
        // 向后端发送请求
        doGet("/api/user/notOwnedRole", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 角色选项
            this.notOwnedRoleUserOptions = resp.data.data;
          } else {
            messageTip("角色下拉选项加载失败", "error");
          }
        })
      },

      // 分页函数
      toPage(current) {
        this.loadPermissionList(current);
      },

      // 添加用户按钮
      add() {
        // 清空角色用户对象信息
        this.roleUserQuery = { };

        // 弹出对话框
        this.roleUserDialogVisible = true;
      },

      // 提交按钮
      addRoleUser() {
        // 验证表单规则
        this.$refs.roleUserRefForm.validate( (isValid) => {
          if (isValid) {
            // 向后端发送请求
            doPost("/api/user/role/add", {
              roleId: this.$route.params.id,      // 角色id
              userId: this.roleUserQuery.userId   // 用户id
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("添加成功", "success");
                // 返回刷新页面
                this.reload();
              } else {
                messageTip("添加失败", "error");
              }
            })
          }
        })
      },

      // 移出用户按钮（传递过来的参数是用户id）
      remove(userId) {
        // 弹出确认框
        messageConfirm("确认移出该用户吗？").then(() => {
          // 向后端发送请求
          doDelete("/api/user/role/remove", {
            roleId: this.$route.params.id,
            userId: userId
          }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("移出成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("移出失败，原因：" + resp.data.msg, "error");
            }
          })
        }).catch(() => {
          messageTip("取消移出", "warning");
        })
      },

      // 返回按钮
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>

  /* 表格 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

